<template>
  <view
    :class="[
      ns.b(),
      ns.m(labelPos.toLowerCase()),
      ns.is('required', required),
      ns.is('error', !!error),
      ns.is('show-label', labelPos === 'NONE'),
    ]"
    :style="cssVars"
  >
    <view :class="ns.b('content')">
      <view
        v-if="labelPos === 'LEFT' || labelPos === 'TOP'"
        :class="ns.e('label')"
      >
        <text>{{ label }}</text>
      </view>
      <view :class="ns.e('editor')">
        <slot></slot>
      </view>
      <view
        v-if="labelPos == 'RIGHT' || labelPos === 'BOTTOM'"
        :class="ns.e('label')"
      >
        <text>{{ label }}</text>
      </view>
    </view>
    <view v-if="!!error" :class="ns.b('error')">{{ error }}</view>
  </view>
</template>
<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: "shared"
  }
}
</script>
<script setup lang="ts">
import { useNamespace } from "@/use";
import { computed } from "vue";

const props = defineProps({
  required: {
    type: Boolean,
    required: true,
  },
  error: {
    type: String,
  },
  label: {
    type: String,
  },
  labelPos: {
    type: String,
    required: true,
  },
  labelWidth: {
    type: Number,
    default: 130,
  },
});

const ns = useNamespace("form-item-container");
let labelAlign: "right" | "left" = "left";
let editorAlign: "right" | "left" = "right";
const cssVars = computed(() => {
  switch (props.labelPos) {
    case "LEFT":
      labelAlign = "left";
      editorAlign = "right";
      break;
    case "RIGHT":
      labelAlign = "right";
      editorAlign = "left";
      break;
    case "BOTTOM":
      labelAlign = "left";
      editorAlign = "left";
      break;
    case "TOP":
      labelAlign = "left";
      editorAlign = "left";
      break;
    default:
      break;
  }
  const result: IData = {
    "label-align": labelAlign,
    "editor-align": editorAlign,
  };
  if (props.labelWidth !== 130) {
    Object.assign(result, { "label-width": `${props.labelWidth}px` });
  }
  return ns.cssVarBlock(result);
});
</script>
<style lang="scss">
$form-item-container: (
  label-width: rem(130px),
  line-height: getCssVar(form-item, line-height),
  require-mark-color: getCssVar(color, danger),
  container-padding: getCssVar(spacing, base),
  left-container-padding: getCssVar(spacing, base),
  error-margin-top: getCssVar(spacing, extra-tight),
  bg-color: getCssVar(color, bg, 1),
  label-font-size: getCssVar(font-size, header-6),
  label-text-color: getCssVar(color, text, 0),
  container-error-padding: 0 getCssVar(spacing, base),
  border: rem(1px) getCssVar(color, border) solid,
  editor-padding: getCssVar(spacing, tight) getCssVar(spacing, none)
    getCssVar(spacing, tight) getCssVar(spacing, none),
);

$form-item-label: (
  line-height: 1,
  font-size: getCssVar(font-size, header-5),
  text-color: getCssVar(color, text, 0),
);

// 表单项基础样式
@include b(form-item-container) {
  @include set-component-css-var("form-item-container", $form-item-container);
  @include set-component-css-var("form-item-label", $form-item-label);

  position: relative;
  width: 100%;
  height: 100%;
  padding: getCssVar(form-item-container, container-padding);

  // margin: getCssVar(form-item-container, container-margin);
  // font-size: getCssVar(form-item, font-size);
  font-size: rem(14px);
  background-color: getCssVar(form-item-container, bg-color);
  border-width: calc(100% - getCssVar(spacing, base) * 2);
  border-radius: getCssVar(border-radius, small);

  &::after {
    position: absolute;
    z-index: 1;
    width: calc(100% - getCssVar(spacing, base) * 2);
    height: rem(1px);
    content: "";
    //   background-color: getCssVar(color, border);
    background-color: rgb(229 230 235);
    transform: scaleY(0.5);
  }

  @include e(label) {
    position: relative;
    flex-shrink: 0;
    width: getCssVar(form-item-container, label-width);
    overflow: visible;
    color: getCssVar(form-item-label, text-color);

    text {
      @include utils-ellipsis;

      display: inline-block;
      width: 100%;
      font-size: getCssVar(form-item-container, label-font-size);
      text-align: getCssVar(form-item-container, label-align);
    }
  }

  // 编辑器
  @include e(editor) {
    width: 100%;
    text-align: getCssVar(form-item-container, editor-align);

    .van-cell {
      padding-bottom: 0;
    }
  }

  // 必填图标 *
  @include when(required) {
    @include e(label) {
      &::before {
        position: absolute;
        top: rem(3px);
        left: rem(-10px);
        display: inline-block;
        height: 100%;
        font-size: rem(14px);
        // color: getCssVar(form-item, error-color);
        color: red;
        content: "*";
      }
    }
  }

  // 错误border
  &.is-error {
    &::after {
      background-color: getCssVar(form-item, error-color);
    }
  }

  // 错误border
  &.is-error {
    @include b(form-item-container-content) {
      border-color: getCssVar("form-item", "error-color");
    }
  }
}

@include b(form-item-container) {
  @include m(left) {
    &::after {
      bottom: 0;
    }
  }

  @include m(right) {
    &::after {
      bottom: 0;
    }

    // 必填图标 * 兼容右侧标题
    @include when(required) {
      @include e(label) {
        &::before {
          right: rem(-10px);
          left: auto;
        }
      }
    }
  }
}

// label 和编辑器同一行时 编辑器宽度
@include b(form-item-container) {
  @include m(right) {
    @include e(editor) {
      position: relative;
      width: calc(100% - getCssVar("form-item-container", "label-width"));
    }
  }

  @include m(left) {
    @include e(editor) {
      width: calc(100% - getCssVar("form-item-container", "label-width"));
    }
  }

  @include m(top) {
    @include e(editor) {
      padding: getCssVar(form-item-container, editor-padding);
    }
  }

  @include m(bottom) {
    @include e(editor) {
      padding: getCssVar(form-item-container, editor-padding);
    }
  }

  @include e(label) {
  }
}

// border
@include b(form-item-container-content) {
  position: relative;

  // border-bottom: getCssVar('form-item-container', 'border')
}

// 控制布局方向
.#{bem("form-item-container", "", "left")},
.#{bem("form-item-container", "", "right")} {
  .#{bem("form-item-container-content")} {
    height: 100%;

    @include flex(row, center, center);
  }
}

// 错误提示信息
@include b(form-item-container-error) {
  position: absolute;
  bottom: 0;
  width: calc(100% - getCssVar("spacing", "base"));
  padding-right: getCssVar("spacing", "base");
  font-size: getCssVar("form-item", "error-font-size");
  line-height: getCssVar("form-item", "font-size");
  // color: getCssVar("form-item", "error-color");
  color: red;
  text-align: getCssVar("form-item-container", "editor-align");
}
</style>
